<template>
  <el-container class="platform-info-root-lay" style="margin: 0;padding: 0;">
    <PlatformTop ref="platTop"
                 :recentPlatforms="recentPlatforms"
                 :recent-tenants="recentTenants"
                 @returnPlatformList="onReturnPlatformList"
                 @platformDetail="onPlatformDetail"/>
    <el-container style="height: 100%; flex: 1;overflow: hidden;padding: 0;margin: 0;">
      <LeftMenu :menus="menus" :title="currentPlatform?.label"
                :name="'platform'" @navMenuChanged="onPlatformMenuChanged"/>
      <el-main style="margin: 0;padding: 0;overflow: hidden;">
        <RouteView/>
      </el-main>
    </el-container>

  </el-container>
</template>

<script setup lang="ts" name="platform">

import {computed, onActivated, onDeactivated, onMounted, onUnmounted, ref} from "vue";

import router from "@/router";
import {useStore} from "@/stores";
import LeftMenu from "@/components/common/LeftMenu.vue";
import PlatformTop from "@/components/platform/PlatformTop.vue";
import RouteView from "@/components/common/RouteWrap.vue";
import {useActiveMenu} from "@/utils/UseActiveMenu";

const store = useStore();
const menus = ref<MenuType[]>(useStore().getSubMenus('/platform') || []);
const platTop = ref(null);

const {updateActiveMenu} = useActiveMenu('platform');

const recentPlatforms = computed(() => {
  return store.$state.recentPlatforms || [];
})

const recentTenants = ref();

// const recentPlatforms = ref([
//   {id: '1', label: 'E家商城', desc: 'E家商城'},
//   {id: '2', label: '美容平台', desc: '美容平台'},
//   {id: '3', label: '考勤系统', desc: '考勤系统'},
//   {id: '4', label: '设备管理系统', desc: '设备管理系统'},
// ]);

// const recentTenants = ref([
//   {id: '', label: '默认', desc: '默认'},
//   {id: '1', label: '公寓商城', desc: '公寓商城'},
//   {id: '2', label: '樱花商城', desc: '樱花商城'},
//   {id: '3', label: '转转卖场', desc: '转转卖场'},
// ]);

const currentPlatformPath = computed(() => {
  return store.$state.platformPath;
})

const initRoute = () => {
  const routePath: string = router.currentRoute.value.path || '';
  if (menus.value && menus.value.length !== 0) {
    const currPath = currentPlatformPath.value ? currentPlatformPath.value : menus.value[0].routePath;
    if (currPath && currPath !== routePath) {
      store.$state.platformPath = currPath;
      const routePath = currPath.replace(':id*', '');

      router.push({
        path: routePath
      });
      updateActiveMenu(routePath);
    }
  }
}

const currentPlatform = computed(() => {
  return store.$state.platform ? store.$state.platform : {};
});

const onReturnPlatformList = () => {
  store.$state.listPage = true;
  router.push({
    path: '/platform-list'
  })
}

const onPlatformMenuChanged = (path: string) => {
  store.$state.platformPath = path;
}

const onPlatformDetail = () => {

}

onMounted(() => {

})

onUnmounted(() => {

})

onActivated(() => {
  initRoute();
})

onDeactivated(() => {

})

</script>

<style scoped>
.platform-info-root-lay {
  display: flex;
  flex: 1;
  height: 100%;
  flex-direction: column;
  color: #C7C8CA;
  overflow: hidden;
}

</style>
